<template>
  <div class="app-main-container">
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" />
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="记录编码" prop="id" min-width="110" show-overflow-tooltip />
      <el-table-column align="center" label="小程序类型" prop="appType" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ statusName(scope.row.appType) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="小程序名称" prop="appName" min-width="120" show-overflow-tooltip>
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{
            scope.row.appName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="APPID" prop="extAppId" show-overflow-tooltip min-width="160" />
      <el-table-column align="center" label="迭代版本号" prop="version" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="版本状态" prop="status" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ statusNames(scope.row.operateFlag) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作时间" prop="createTime" min-width="160" show-overflow-tooltip />
      <el-table-column align="center" label="操作人" prop="creator" min-width="120" show-overflow-tooltip />
    </el-table>
    <Paginations :total="totalCount" :page="pagination.page" @current-change="getList" @SizeChange="handleSizeChange" />
  </div>
</template>

<script>
import QueryForm from '@/components/QueryForm'
import { queryFormConfig } from './config'
import { parseTime } from '@/utils'
import { operateRecord } from '@/api'
export default {
  name: 'EditionPartyDaily',
  components: {
    QueryForm
  },
  data() {
    return {
      filters: {},
      pagination: {
        page: 1,
        rows: 10
      },
      queryFormConfig,
      meta: [],
      list: [],
      totalCount: 10,
      listLoading: false
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {
    if (this.$route.query.renovate) {
      this.getList(1)
    }
  },
  methods: {
    statusName(status) {
      switch (status) {
        case '0': return '会员端'
        case '1': return '运营端'
        default: return '-'
      }
    },
    statusNames(status) {
      switch (status) {
        case '1': return '代码上传'
        case '2': return '代码提审'
        case '3': return '上线发布'
        case '4': return '代码审批撤销'
        case '5': return '版本回退'
        default: return '-'
      }
    },
    handleDetail(e) {
      this.$router.push({ name: 'MiniDetail', query: { id: e.extAppId }})
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
        if (page === 1) {
          pagination.firstQueryTime = parseTime(new Date())
        }
      }
      this.listLoading = true
      operateRecord({
        pagination,
        param: {
          ...filters
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    }
  }
}
</script>

<style></style>
